<template>
	<div class="newBusiness">
		<h5 v-if='this_id'>知识编辑</h5>
		<h5 v-else>新增知识</h5>
		<div class="newBusiness_info">
			<div class="newBusiness_info_box">
				<h4>问题信息</h4>
				<form action="#" class="form">
					<div class="form_all">
						<ul>
							<li><span class="tit">问题</span>
								<el-input v-model="form.question" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
							</li>
							<li><span class="tit">关键词</span>
								<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
									{{tag}}
								</el-tag>
								<el-input class="input-new-tag" v-if="inputVisible && inputshow" v-model="inputValue" ref="saveTagInput" size="small"
								 @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" maxlength="5">
								</el-input>
								<el-button v-else-if="inputshow" class="button-new-tag" size="small" @click="showInput">新增关键词</el-button>
							</li>
							<li><span class="tit">是否顶级</span>
								<el-radio v-model="form.is_parent" label="1" border>是</el-radio>
								<el-radio v-model="form.is_parent" label="0" border>否</el-radio>
							</li>
							<li><span class="tit">类型</span>
								<el-radio-group v-model="form.type" @change="typeChange">
									<el-radio :label="1" border>文本回复</el-radio>
									<el-radio :label="5" border>图片回复</el-radio>
									<el-radio :label="2" border>跳转人工</el-radio>
									<el-radio :label="3" border>跳转链接</el-radio>
									<el-radio v-if="!pid" :label="4" border>下级选项</el-radio>
									<el-radio :label="6" border>地址定位</el-radio>
								</el-radio-group>
							</li>
						</ul>
					</div>
				</form>
			</div>
		</div>
		<div v-if="form.type==1" class="newBusiness_info type1">
			<div class="newBusiness_info_box">
				<h4>回复内容</h4>
				<form action="#" class="form">
					<div class="form_all">
						<ul>
							<li class="line2em"><span class="tit">文字答案</span>
								<el-input v-model="form.answer" type="textarea" :rows="3" placeholder="请输入内容"></el-input>
							</li>
						</ul>
					</div>
				</form>
			</div>
		</div>
		<div v-if="form.type==5" class="newBusiness_info type1">
			<div class="newBusiness_info_box">
				<h4>回复内容</h4>
				<form action="#" class="form">
					<div class="form_all">
						<ul>
							<!-- <li class="line2em"><span class="tit">文字答案</span>
								<el-input v-model="form.answer" type="textarea" :rows="3" placeholder="请输入内容"></el-input>
							</li> -->
							<li class="lineIMG"><span class="tit">图片答案</span>
								<div class="imgbox">
									<ImagesUpload fileType="images" :images.sync="form.imgs" limit=1></ImagesUpload>
								</div>
							</li>

						</ul>
					</div>
				</form>
			</div>
		</div>

		<div v-if="form.type==2" class="newBusiness_info type1">
			<div class="newBusiness_info_box">
				<h4>引导内容</h4>
				<form action="#" class="form">
					<div class="form_all">
						<ul>
							<li class="line2em"><span class="tit">文案</span>
								<el-input v-model="form.answer" type="textarea" :rows="3" placeholder="请输入内容"></el-input>
							</li>
						</ul>
					</div>
				</form>
			</div>
		</div>

		<div v-if="form.type==3" class="newBusiness_info type1">
			<div class="newBusiness_info_box">
				<h4>跳转链接</h4>
				<form action="#" class="form">
					<div class="form_all">
						<ul>
							<li class="line2em"><span class="tit">文字</span>
								<el-input v-model="form.answer" type="textarea" :rows="3" placeholder="请输入内容"></el-input>
							</li>
							<li class="line2em"><span class="tit">链接</span>
								<el-input v-model="form.url" type="text" placeholder="请输入跳转链接"></el-input>
							</li>
						</ul>
					</div>
				</form>
			</div>
		</div>

		<div v-if="form.type==4" class="newBusiness_info type4">
			<div class="newBusiness_info_box">
				<h4>下级路径</h4>
				<div v-for="(item,index) in form.son" :key="index" class="nextQuestionBox">
					<p class="questionID">知识库ID：{{item.id}}</p>
					<p class="questionTit">问题1：{{item.question}}</p>
					<div class="questionContent">
						<ul class="questionBtnList">
							<li><i class="el-icon-delete" @click.stop="toDelete(item.id)"></i></li>
							<li><i class="el-icon-edit" @click.stop="toDetail(item.id)"></i></li>
						</ul>
						<p class="keywords">关键词：{{item.keyword}}</p>
						<p v-if="item.type==1">回复方式：图文回复</p>
						<p v-else-if="item.type==2">回复方式：跳转人工</p>
						<p v-if="item.type==1">文字答案：{{item.answer}}</p>
						<p v-else-if="item.type==2">引导内容：{{item.answer}}</p>
						<p v-if="item.type==1" class="imglist">图片：<img v-for="(img,index1) in item.imgs" :key="index1" :src=img.path /></p>

					</div>
				</div>
				
			</div>
			<div v-if="form.son.length<4" class="addNextQuestion">
				<div class="addNextBtn" @click="addNext">添加下级路径</div>
			</div>
		</div>

		<div v-if="form.type==6" style="width:70%;height:800px;margin:0 auto;" class="newBusiness_info type6">
			<iframe id="mapPage" width="100%" height="100%" frameborder=0
				:src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=EHPBZ-PHO3W-FUORZ-RTLED-YEX4O-PPFIB&referer=myapp&coord=${latlng}`">
			</iframe>
		</div>


		<div class="submitBtn">
			<button @click="toEdit">提交</button>
		</div>

		


		<el-dialog title="添加下级路径" :visible.sync="dialogTableVisible">
			<div class="dialogbox">
				<div class="newBusiness_info">
					<div class="newBusiness_info_box">
						<h4>问题信息</h4>
						<form action="#" class="form">
							<div class="form_all">
								<ul>
									<li class="line2em"><span class="tit">问题</span>
										<el-select v-model="thisnext" multiple filterable remote  placeholder="请输入关键词" :remote-method="remoteMethod"
										 :loading="loading">
											<el-option v-for="item in queList" :key="item.id" :label="item.question" :value="item.id">
											</el-option>
										</el-select>
									</li>
									<li class="line2em"><span class="tit">没有找到？</span>
											<div class="addNextBtn" @click="toDetail()">新增问题</div>
									</li>
								</ul>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogTableVisible = false">取 消</el-button>
				<el-button type="primary" @click="addNextFormList">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import ImagesUpload from '@/components/common/ImagesUpload.vue'
	export default {
		components: {
			ImagesUpload,
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			info: {
				type: Object,
			},
		},
		data() {
			return {
				user_id: null,
				this_id: null, //编辑跳转过来的id
				status: 1,
				editPassW: true, //修改密码
				endTimePick: true, //
				newkeyword: '',
				queList: [],
				form: {
					//账号信息
					question: "", //问题
					type: null, //类型
					keyword: "", //关键词组
					answer: "", //回答
					is_human: 0, //是否转人工
					url: "", //跳转链接
					next_id: "", //下级问题ID字符串
					is_child: 0,
					imgs: [],
					cat_id:-1,//添加的时候这个字段传-1 就不验证了 编辑的时候0或者-1 或者不传都不会影响数据
					address_name:'',//地址名
					address:'',//地址
					latitude:'',//纬度
					longitude:'',//经度
					is_parent:'0',//是否顶级菜单
				},
				addNextBtn: true,
				dynamicTags: [],
				inputVisible: false,
				inputValue: '',
				inputshow: true,
				loadingIMG: false,
				loading: false,
				
				latlng:'',//地图回显coord经纬度

				dialogTableVisible: false,
				thisnext: null,

				editInfo: { //修改提交时用来比较那一项修改过了
					ori_password: '',
					realname: '',
					mobile: '',
					title: ''
				},
				tableList: [],
				state2: '',
				restaurants: [{
					a: 1
				}, {
					b: 2
				}],
				pid:0,
				next_id:0,
			};
		},
		watch:{
		  $route(to,from){
		    if(to!=from){
				this.$router.go(0);
			}
		  }
		},
		mounted() {
			let this_id = this.$route.query.id;
			this.this_id = this_id ? this_id : null;
			let user_id = localStorage.getItem("user_id");
			this.user_id = Number(user_id);
			this.pid = this.$route.query.pid;
			this.next_id = this.$route.query.next;
			this.getShopStore();
			// 监听用户选择位置
			let that = this
			window.addEventListener('message', function(event) {
				// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
				var loc = event.data;
				if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
					console.log('location', loc);
					that.form.latitude = loc.latlng.lat;
					that.form.longitude = loc.latlng.lng;
					that.form.address_name = loc.poiname;
					that.form.address = loc.poiaddress;
					console.log(that.form,'---');
				}
			}, false)
		},
		
		methods: {

			//获取详情
			getShopStore() {
				if (this.this_id) {
					this.$http
						.post("/api/root/qywx/KeFuKnowledgeInfo", {
							knowledge_id: this.this_id
						})
						.then(res => {
							let imgs = res.data.imgs
							if (res.code == 1) {
								let data = res.data;
								this.form = data ? data : [];
								this.form.imgs = [];
								if(!this.form.son){
									this.form.son = [];
								}
								if (imgs) {
									let imgslist = [];
									imgs.forEach(function(item, index) {
										let obj = {
											url: item.path,
											id: item.id
										};
										imgslist.push(obj);
									})
									this.form.imgs = imgslist;
								}
								this.latlng = res.data.latitude+','+res.data.longitude;
								this.dynamicTags = data.keyword.split(',');
								if (this.dynamicTags.length >= 5) {
									this.inputVisible = true;
								}
								if (res.data.type == 4 && res.data.son.length >= 5) {
									this.addNextBtn = false;
								} else {
									this.addNextBtn = true;
								}
								if(this.next_id){
									addNextFormList([item]);
								}
							}
						});
				}else{
					if(!this.form.son){
						this.form.son = [];
					}
					if(this.next_id){
						addNextFormList([item]);
					}
				}

			},
			handlerCheckbox() {

			},
			addNext() {
				this.dialogTableVisible = true;
			},
			remoteMethod(query) {
				if (query !== '') {
					this.loading = true;
					this.$http
						.post('/api/root/qywx/KeFuKnowledgeList', {
							page: 1,
							pagesize: 20,
							keyword: query,
						})
						.then(res => {
							if (res.code == 1) {
								let data = res.data.list;
								this.loading = false;
								this.queList = data;
								/*
								this.queList = data.filter(item => {
									console.log(item)
									
									return item.question.toLowerCase()
										.indexOf(query.toLowerCase()) > -1;
										
								});
								*/
							}
						});



				} else {
					this.options = [];
				}
			},

			handleSelect(item) {
				console.log(item);
			},
			addNextFormList(item) {
				console.log(this.thisnext,'nextid');
				this.thisnext.forEach(item=>{
					if(toString(this.form.next_id).indexOf(item) == -1){
						this.$http
							.post("/api/root/qywx/KeFuKnowledgeInfo", {
								knowledge_id: item
							})
							.then(res => {
								if (res.code == 1) {
									let data = res.data;
									this.form.son.push(data);
									console.log(this.form.son,'下级');
									this.$forceUpdate();
									// this.form.next_id = this.form.next_id+','+item;
								}else{
									this.$message.error(res.msg);
								}
							});
					}
				})
				
				console.log(this.form.son,1111);
				this.thisnext=null;
				this.dialogTableVisible = false;
			},


			// 提交按钮
			toEdit() {
				let imgList = '';
				if (this.form.imgs) {
					this.form.imgs.forEach((item, index) => {
						if (index == 0) {
							imgList += item.id;
						} else {
							imgList = imgList + ',' + item.id
						}
					})
				}
				this.form.imgs = imgList;
				if(this.dynamicTags.length>0){
					var newTags = '';
					this.dynamicTags.forEach(item=>{
						if(newTags == ''){
							newTags = item;
						}else{
							newTags = newTags+','+item;
						}
					})
					this.form.keyword = newTags;
				}

				let arr = []
				this.form.son.map(item=>{
					arr.push(item.id)
				})
				this.form.next_id = arr.join(',')

				if(this.form.type==6 && this.form.latitude=='' && this.form.longitude==''){
					this.$message.warning('请选择定位地址')
					return
				}
				
				
				if(this.form.id){
					this.$http.post('/api/root/qywx/KeFuKnowledgeEdit', this.form).then(res => {
						if (res.code==1) {
							this.$router.back(1);
							this.$message({
								type: 'success',
								message: '修改成功'
							})
							
						}else{
							this.$message.error(res.msg);
						}
					})
				}else{
					this.$http.post('/api/root/qywx/KeFuKnowledgeAdd', this.form).then(res => {
						if (res.code==1) {
							this.$message({
								type: 'success',
								message: '添加成功'
							})
							if(this.pid){
								this.$router.push({name:'qywxKnowledgeDetail',query:{id:this.pid,next:res.data.id}});
								this.$router.go(0);
							}else{
								this.$router.push({path:'/qywxKnowledgeList'})
							}
						}else{
							this.$message.error(res.msg);
						}
					})
				}
				
				
			   
			   
			},

			handleClose(tag) {
				this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
				if (this.dynamicTags.length < 5) {
					this.inputshow = true;
					this.inputVisible = false;
					this.inputValue = '';
				} else {
					this.inputshow = false;
					this.inputVisible = false;
					this.inputValue = '';
				}
			},
			

			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
			},
			
			

			handleInputConfirm() {
				let inputValue = this.inputValue;
				if (inputValue) {
					this.dynamicTags.push(inputValue);
				}
				if (this.dynamicTags.length < 5) {
					this.inputshow = true;
					this.inputVisible = false;
					this.inputValue = '';
				} else {
					this.inputshow = false;
					this.inputVisible = false;
					this.inputValue = '';
				}

			},
			

			typeChange(val) {
				this.form.type == 2 ? this.form.is_human = 1 : this.form.is_human = 0;
			},
			toDetail(id){
				this.$router.push({name:'qywxKnowledgeDetail',query:{id}});
				this.$router.go(0);
			},
			
			toDelete(id){
				this.$confirm('删除此下级路径？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(()=>{
					let newList = [];
					let newStr = "";
					this.form.son.forEach(item=>{
						if(item.id!=id){
							newList.push(item);
							if(newStr == ""){
								newStr = item.id;
							}else{
								newStr = newStr+','+item.id;
							}
						}
					})
					this.form.son = newList;
					this.form.next_id = newStr;
				})
				
			},

		}
	};
</script>

<style lang="less" scoped>
	@import "knowledgeDetail.less";
	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.newBusiness .newBusiness_info{
		background-color: #fff;
	}

	.newBusiness .newBusiness_info .newBusiness_info_box .form .form_all ul li span.el-tag el-tag--light {
		width: auto;
		text-align: center;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}

	.uoloadSty .el-upload--picture-card {
		width: 110px;
		height: 110px;
		line-height: 110px;
	}

	.disUoloadSty .el-upload--picture-card {
		display: none;
		/* 上传按钮隐藏 */
	}


	/*
	.button-new-img{
		width: 80px;
		height: 80px;
		font-size: 40px;
		text-align: center;
		line-height: 80px;
		vertical-align: middle;
	}
	
	.imgbox .imgwrap{
		width: 80px;
		margin-right: 10px;
		height: 80px;
		display: inline-block;
		overflow: hidden;
		position: relative;
		vertical-align: middle;
		border: 2px solid #C0C0C0;
		
	}
	.imgbox .imgwrap img{
		width: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	*/
	.addNextQuestion {
		width: 100%;
		padding: 20px 0;
	}

	.addNextBtn {
		display: inline-block;
		font-size: 20px;
		height: 2em;
		line-height: 2em;
		border-radius: 6px;
		background-color: #0080FF;
		color: #fff;
		padding: 0 10px;
		cursor: pointer;
	}


	.nextQuestionBox {
		width: 100%;
		padding: 20px 0;
		margin: 0;
		border-bottom: 2px solid #C0C0C0;
	}

	.nextQuestionBox .questionTit {
		font-size: 18px;
		line-height: 2em;
	}

	.nextQuestionBox .questionID {
		font-size: 20px;
		line-height: 2em;
		color: #000FFF;
	}

	.nextQuestionBox .questionContent {
		width: calc(100% - 80px);
		padding-left: 80px;
		position: relative;
	}

	.questionContent ul {
		list-style: none;
		position: absolute;
		left: 0;
		top: 0;
	}

	.questionContent ul li {
		width: 30px;
		height: 30px;
		margin-right: 8px;
		display: inline-block;
		border: 2px solid #C0C0C0;
		position: relative;
	}
	
	.questionContent ul li i {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

	.questionContent p {
		padding: 2px 0;
	}

	.questionContent p.keywords {
		padding: 8px 0;
	}

	.questionContent .imglist {
		height: 80px;
	}

	.questionContent .imglist img {
		width: 80px;
		height: 80px;
		margin-right: 10px;
		vertical-align: top;
	}

	.imgbox {
		height: 100%;
		width: 100%;
		overflow: hidden;
	}

	.logoShadow {
		position: relative;
		width: 80px;
		height: 80px;
		display: inline-block;
		margin-right: 10px;
	}

	.logoShadow img {
		width: 100%;
		height: 100%;
	}

	.logoShadow .deleteShadow {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		opacity: 0;
		color: #fff;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: 0.2s;

		i{
			cursor: pointer;
		}
	}

	.logoShadow:hover .deleteShadow {
		opacity: 1;
	}

	.uploadImg {
		width: 80px;
		height: 80px;
		position: relative;
		border: 1px solid rgba(0, 0, 0, 0.3);
		display: inline-block;

	}

	.newBusiness .newBusiness_info .newBusiness_info_box .form .form_all ul li .uploadImg input.inputIMG {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		opacity: 0;
		padding: 0;
		margin: 0;
	}

	.uploadImg .fileImg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		text-align: center;
		line-height: 80px;
	}

	.el-dialog {
		width: 80%;

	}

	.el-dialog__body {
		padding: 0;
	}

	.el-dialog .el-dialog__body {
		background-color: #f5f5f5;
	}
</style>
